デザイン知識の幅を広げる参考サイト vol.3 ～入力フォームデザインTips～

前回までは全体的なデザインレイアウトのご紹介をしましたが、今回はもう少し掘り下げたデザインのご紹介をします。
今回は、はじめに入力フォームのデザインTipsのまとめのご紹介と、フォーム参考となるサイトをご紹介します。

フォームデザインTipsまとめ

Tips1.クリーン&シンプルを目指しましょう。

• スクリーンサイズを基本として、スクロールするほどの多量な欄はなるべく避けましょう。
• 余計な情報表示は避け、必要最低限の情報表示を心がけましょう。
• 入力部分の背景は、なるべくホワイトスペースにしましょう。
• フォームの並びは、複雑な並びは避け、縦一列に整列させるのが望ましいでしょう。
• ユーザーの入力の手間の省略可のため、選択可能なチェックボックスやラジオボタン、コンボボックスを使用するのが望ましいでしょう。

提供元：Twitter：login

Tips2.フォント使いに注意しましょう。

• タイトルフォントは大きいサイズでボールドを使用して、他のフォントより目立たせましょう。また、フォーム内ラベルもボールドが望ましいでしょう。
• 背景のコントラストカラーを使用しましょう。
• フォーム内フォントサイズは、11ピクセル以上が望ましいでしょう。
• タイトル以外のラベルボールドで、背景のコントラストカラーを使用しましょう。

提供元：Campaign Monitor:Create An Account

Tips3.自然な色使いを心がけましょう。

• 使用しているロゴと統一させるのが望ましいでしょう。ハデな色使いは避けましょう。
• 全体のトーンバランスを考慮し、一般的に5色までが望ましいでしょう。
• 柔らかく、親近感のある色みが望ましいでしょう。

提供元：WordPress:login

Tips4.分かりやすい誘導を心がけましょう。

• このフォームに入力する必要性を明確にしましょう。
• テキストインプット内にウォーターマーク（※1）を採用するのが望ましいでしょう。
• 小文字で説明コメントを隣接することも親切です。
• 入力ミス、未入力時には、直後にアラートを表示しましょう。アラートの内容説明も忘れずに。

提供元：楽天：会員登録

Tips5.適切なボタン表示を目指しましょう。

• 表示される熟語のラベルは、約2～3語までが望ましいでしょう。
• 大きめのボタンとラベルを使用しましょう。
• キャンセルボタンは必ずしも必要ではありません。
• 主要な要素はボタンに、サブはリンクにしましょう。

提供元：eふれんず：会員の登録

最後に、美しいフォームサンプルが紹介されているサイトをご紹介します。

フォームデザインTipsまとめ

Blog Comment Form Design Showcase | Smiley Cat Web Design：comment form showcase

比較的シンプルで見やすいフォームが紹介されています。

Pattern Tap：FORMS

一般的に親しまれているフォームや、ユニークなフォームデザインが多数紹介されています。

BLOG DESIGN BLOG：37 Ways to Design the Comments Form

安定感のあるシンプルなフォームデザインが紹介されています。

Smashing Magazine:Web Form Design: Modern Solutions and Creative Ideas

基本をおさえつつ、ユニークなフォームデザインが紹介されています。

※1.ウォーターマーク：一般的に入力例が透かしの状態の表示

Tips参照元：

• The ROI Factor:10 Ideas to Design a Better Sign-Up Form
• GetResponse: Top 5 Web Form Design Best Practices
• Maxpoint Interactive:OnePoint Blog
• Template Monster Blog:Form Design – 20 Usability Tips and Best Practices